<template>
  <div>
    <Tips />

    <van-checkbox-group v-model="result" :disabled="isEditing">
      <van-checkbox
        :name="item.id"
        v-for="item in cartList"
        :key="item.id"
        @click="goodItemClick(item)"
      >
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price | RMBformat"
            :title="item.goods_name"
            :thumb="item.list_pic_url"
            class="goods-card"
          />
          <van-stepper
            v-model="item.number"
            v-show="isEditing"
            @change="stepperChange(item)"
          />
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="delGoodFn(item.product_id)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox>
    </van-checkbox-group>

    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll" :disabled="isEditing"
        >全选</van-checkbox
      >
      <template #tip>
        累计共<span>{{ cartTotal.checkedGoodsCount }}</span
        >件商品，可点击
        <span class="tipupdate" @click="isEditing = !isEditing">{{
          isEditing ? "完成编辑" : "编辑"
        }}</span>
        进行商品数量修改
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import Tips from "@/components/Tips";
import {
  GetCartData,
  ChangeGoodschecked,
  StepNum,
  DelGood,
} from "@/request/api";
export default {
  data() {
    return {
      checked: false,
      cartList: [], //购物车列表
      cartTotal: {}, //总数信息
      result: [], //展示选中的数组
      // 是否在编辑中状态
      isEditing: false,
    };
  },
  components: {
    Tips,
  },
  computed: {
    checkedAll: {
      get() {
        // 什么时候表示全选?? result的长度和cartList的长度一致的时候
        return this.result.length == this.cartList.length;
      },
      set(val) {
        //val就是即将要变成的值

        // 遍历每一项
        let ids = [];
        this.cartList.map((item) => {
          ids.push(item.product_id);
        });
        ChangeGoodschecked({
          isChecked: val == false ? 0 : 1,
          productIds: ids.join(), //要把当前每一项的id传过去
        }).then((res) => {
          console.log("res", res);
          if (res.errno == 0) {
            this.totalFn(res.data);
          }
        });
      },
    },
  },
  created() {
    GetCartData().then((res) => {
      console.log(res);
      this.cartList = res.data.cartList;
      this.cartTotal = res.data.cartTotal;
      this.cartList.map((item) => {
        item.checked == 1 ? this.result.push(item.id) : "";
      });
      // 改变购物车数据
      this.totalFn(res.data);
    });
  },
  methods: {
    onSubmit() {},
    goodItemClick(item) {
      console.log(item);
      ChangeGoodschecked({
        // 是否选中状态
        isChecked: item.checked == 1 ? 0 : 1,
        // 商品id
        productIds: item.product_id.toString(),
      }).then((res) => {
        if (res.errno == 0) {
          // 通过后端重新计算总价和购物车列表渲染数据
          this.totalFn(res.data);
        }
      });
    },
    // 从created中抽取了 计算总价和购物车列表渲染数据 的方法
    totalFn(data) {
      /* 这里清空一下 this.result，防止存留有上一次请求时候添加的数据*/
      this.result = [];
      this.cartList = data.cartList;
      this.cartTotal = data.cartTotal;

      this.cartList.map((item) => {
        item.checked == 1 ? this.result.push(item.id) : "";
      });
    },
    stepperChange(item) {
      console.log(item.number);

      StepNum({
        number: item.number,
        goodsId: item.goods_id,
        id: item.id,
        productId: item.product_id,
      }).then((res) => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    },
    delGoodFn(pid) {
      DelGood({
        productIds: pid.toString(),
      }).then((res) => {
        if (res.errno == 0) {
          this.totalFn(res.data);
        }
      });
    },
  },
};
</script>
 
<style lang="less" scoped>
.van-submit-bar {
  bottom: 0.5rem;
}
/deep/.van-checkbox__label {
  flex: 1;
}
.van-checkbox-group {
  padding-bottom: 1.5rem;
  .van-checkbox {
    background-color: #fff;
    padding: 0.1rem;
    border-bottom: 1px solid #ccc;
  }
}
.van-stepper {
  text-align: right;
}
.tipupdate {
  color: rgb(18, 179, 243);
  cursor: pointer;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>